<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box" abcd="123">这是一个div</div>
    <input type="text">

    <img src="https://cookiescdn.lenovo.com.cn/wp-content/uploads/2024/09/2024091107035176-1024x576.jpg" alt="" srcset="">

    <script>
        // 获取元素
        let box = document.querySelector("div");
        let inp = document.querySelector("input");
        let img = document.querySelector("img")

        // 获取并设置元素的原生属性
        box.id = "container";
        inp.type = "radio";
        inp.className = "username";

        // 获取并设置自定义属性
        console.log(box.getAttribute("abcd"));
        box.setAttribute("abcd","34567");
        box.removeAttribute("abcd");

        // 通过操作自定义属性的方法去操作原生属性
        console.log(inp.getAttribute("type"));
        
        // 通过原生属性的方式修改img的src属性
        // img.src = "https://cookiescdn.lenovo.com.cn/wp-content/uploads/2024/09/2024091105543991.jpg"
        img.setAttribute("src","https://cookiescdn.lenovo.com.cn/wp-content/uploads/2024/03/2024030707534521.jpg")
    </script>
</body>
</html>